<template>
  <section class="content">
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">模板信息</h3>
      </div>
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <div class="col-sm-6">
              <div class="row">
                <label class="col-sm-2 control-label">模板名称：</label>
                <div class="col-sm-5">
                  <div class="form-control no-border">
                    test <span href="" class="text-blue m-lr-10">修改</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>

    <div class="row">
      <div class="col-xs-12">
        <div class="box box-info">
          <div class="box-header with-border">
            <label for="" class="text-red">说明：</label>运费=首重费用+（包裹重量-首重）/续重单位重量*单价+挂号费
            <button type="button" class="btn bg-yellow pull-right m-r-10" data-toggle="modal" data-target="#modal-default">添加国家</button>
            <div class="btn-group pull-right bg-info m-r-10">
              <button type="button" class="btn btn-info">批量操作</button>
              <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="javascript:void(0);">编辑</a></li>
                <li><a href="javascript:void(0);">删除</a></li>
              </ul>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example3" class="table table-bordered table-hover">
              <thead>
              <tr>
                <th>
                  <label>
                    <input type="checkbox" class="flat-red" checked>
                  </label>
                </th>
                <th>国家</th>
                <th>重量范围</th>
                <th>首重/首重费用</th>
                <th>续重单位重量/单价</th>
                <th>挂号费</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr ref="trItem">
                <td>
                  <label>
                    <input type="checkbox" class="flat-red">
                  </label>
                </td>
                <td>欧美</td>
                <td>1g ~ 4g</td>
                <td>1g / ￥1.0</td>
                <td>1g / ￥1.0</td>
                <td>￥1.0</td>
                <td>
                  <a href="javascript:;" class="text-green m-lr-10">编辑</a>
                  <a href="javascript:;" class="text-green m-lr-10">删除</a>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->

      </div>
      <!-- /.col -->
    </div>


    <div class="modal fade" id="modal-default">
      <div class="modal-dialog other-width">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">添加国家</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal max_height">
              <div class="box-body">
                <div class="form-group">
                  <div class="col-sm-12">
                    <label for="" class="control-label">选择国家</label>
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#modal-default2">
                      指定国家(美国，意大利)
                    </a>
                  </div>
                </div>

                <div class="form-group">
                  <div class="box box-info">
                    <div class="box-header with-border text-center">
                      美国
                      <a href="javascript:void(0);" class="pull-right">+添加重量范围</a>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                      <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                          <th>开始重量/g</th>
                          <th>结束重量/g</th>
                          <th>首重/g</th>
                          <th>首重运费/RMB</th>
                          <th>续重单位重量/g</th>
                          <th>单价/RMB</th>
                          <th>挂号费/RMB</th>
                          <th style="width: 80px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ref="trItem">
                          <td>
                              <span class="btn btn-info">1 G</span>
                          </td>
                          <td>
                              <div class="input-group">
                                <input type="text" class="form-control" placeholder="" value="5">
                                <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                              </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="15">
                            </div>
                          </td>
                          <td>
                            <div class="input-group">

                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="10">
                            </div>
                          </td>
                          <td>
                              <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="20">
                            </div>
                          </td>
                          <td>
                            <a href="javascript:;" class="text-green m-lr-10">删除</a>
                          </td>
                        </tr>
                        <tr ref="trItem">
                          <td>
                            <span class="btn btn-info">1 G</span>
                          </td>
                          <td>
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="" value="5">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="15">
                            </div>
                          </td>
                          <td>
                            <div class="input-group">

                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="10">
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="20">
                            </div>
                          </td>
                          <td>
                            <a href="javascript:;" class="text-green m-lr-10">删除</a>
                          </td>
                        </tr>
                        <tr ref="trItem">
                          <td>
                            <span class="btn btn-info">1 G</span>
                          </td>
                          <td>
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="" value="5">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="15">
                            </div>
                          </td>
                          <td>
                            <div class="input-group">

                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="10">
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="20">
                            </div>
                          </td>
                          <td>
                            <a href="javascript:;" class="text-green m-lr-10">删除</a>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <div class="box box-info">
                    <div class="box-header with-border text-center">
                      美国
                      <a href="javascript:void(0);" class="pull-right">+添加重量范围</a>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                      <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                          <th>开始重量/g</th>
                          <th>结束重量/g</th>
                          <th>首重/g</th>
                          <th>首重运费/RMB</th>
                          <th>续重单位重量/g</th>
                          <th>单价/RMB</th>
                          <th>挂号费/RMB</th>
                          <th style="width: 80px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ref="trItem">
                          <td>
                            <span class="btn btn-info">1 G</span>
                          </td>
                          <td>
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="" value="5">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="15">
                            </div>
                          </td>
                          <td>
                            <div class="input-group">

                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="10">
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="20">
                            </div>
                          </td>
                          <td>
                            <a href="javascript:;" class="text-green m-lr-10">删除</a>
                          </td>
                        </tr>
                        <tr ref="trItem">
                          <td>
                            <span class="btn btn-info">1 G</span>
                          </td>
                          <td>
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="" value="5">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="15">
                            </div>
                          </td>
                          <td>
                            <div class="input-group">

                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="10">
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="20">
                            </div>
                          </td>
                          <td>
                            <a href="javascript:;" class="text-green m-lr-10">删除</a>
                          </td>
                        </tr>
                        <tr ref="trItem">
                          <td>
                            <span class="btn btn-info">1 G</span>
                          </td>
                          <td>
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="" value="5">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="15">
                            </div>
                          </td>
                          <td>
                            <div class="input-group">

                              <input type="text" class="form-control" placeholder="" value="500">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">g</button>
                                </span>
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="10">
                            </div>
                          </td>
                          <td>
                            <div class="input-group">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat">￥</button>
                                </span>
                              <input type="text" class="form-control" placeholder="" value="20">
                            </div>
                          </td>
                          <td>
                            <a href="javascript:;" class="text-green m-lr-10">删除</a>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- /.box-body -->
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="box-body text-center">
            <button type="button" class="btn btn-info">保存并编辑</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-default2">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">指定国家</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal max_height">
              <div class="form-group">
                <div class="col-sm-7">
                  <button type="button" class="btn btn-info btn-flat m-r-10">热门</button>
                  <button type="button" class="btn btn-default btn-flat m-r-10">全部</button>
                  <button type="button" class="btn btn-default btn-flat m-r-10">欧洲</button>
                  <button type="button" class="btn btn-default btn-flat m-r-10">亚洲</button>
                  <button type="button" class="btn btn-default btn-flat m-r-10">非洲</button>
                </div>
                <div class="col-sm-5">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="请输入国家名称">
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-info btn-flat">搜  索</button>
                    </span>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-12">
                  <label>
                    <input type="checkbox" class="flat-red">全部
                  </label>
                </div>
                <div class="clearfix">
                  <div class="col-sm-2">
                    <label>
                      <input type="checkbox" class="flat-red">俄罗斯
                    </label>
                  </div>
                  <div class="col-sm-2">
                    <label>
                      <input type="checkbox" class="flat-red">保加利亚
                    </label>
                  </div>
                  <div class="col-sm-2">
                    <label>
                      <input type="checkbox" class="flat-red">全部
                    </label>
                  </div>
                  <div class="col-sm-2">
                    <label>
                      <input type="checkbox" class="flat-red">全部
                    </label>
                  </div>
                  <div class="col-sm-2">
                    <label>
                      <input type="checkbox" class="flat-red">全部
                    </label>
                  </div>
                  <div class="col-sm-2">
                    <label>
                      <input type="checkbox" class="flat-red">全部
                    </label>
                  </div>
                  <div class="col-sm-2">
                    <label>
                      <input type="checkbox" class="flat-red">全部
                    </label>
                  </div>
                  <div class="col-sm-2">
                    <label>
                      <input type="checkbox" class="flat-red">全部
                    </label>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label for="" class="control-label">已选国家：</label>
                <div class="clearfix">
                  <div class="col-sm-2">
                    <label for="">
                      <input type="checkbox" class="flat-red">全部
                    </label>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="box-body text-center">
            <button type="button" class="btn btn-info">确定</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
  </section>
</template>

<script>
    export default {
        name: "AddFreighTempate",
      created(){
          this.$nextTick(function () {
            console.log($('table input').length)
          })
      }
    }
</script>

<style scoped>

</style>
